class SoftLabel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            softList: [''],
            fileInputValue: '点击选择上传的文件',
            fileName: '',
            filePath: ''
        };
        this.pageCount = 0;
        this.pageSize = 0;
    }

    componentDidMount() {
        this.updateSoftList(1, 10);
        this.verify = {
            softName: function (value) {
                if (value.length < 2) {
                    return '软件名称至少得2个字符!';
                }
            },
            softVision: function (value) {
                let reg = /^\d+(\.\d+)*$/;
                if (!reg.test(value)) {
                    return '软件版本号格式不正确!';
                }
            },
            codeVision: function (value) {
                let reg = /^[0-9]+$/;
                if (!reg.test(value)) {
                    return '代码版本号格式不正确!';
                }
            }
        };
        postJson("/softLabel/querySoftLabels.x", null, (data) => {
            console.log("data", data);
            this.setState({
                softlabels: data.data
            });
        });
    }

    searchChange() {
        this.updateSoftList(1, 10);
    }

    upload = (event) => {
        let file = event.target.files[0];
        postUpload('/cms/appResource/uploadFile.x?isTemp=true', {
            file: file
        }, (event) => {
            console.log('event222: ', event.loaded / event.total * 100);
        }, (data) => {
            console.log('Selected file:', data);
            this.setState({
                filePath: data.data.imagePath,
                fileName: file.name,
                fileInputValue: file.name
            });
        }, (error) => {
            layer.msg(error, {icon: 5});
        });

    };

    /* custom functions */
    updateSoftList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        params.softLabel = this.refs.searchSoftLabel.value;
        params.equType = this.refs.searchEquType.value;
        postJson("/appupdate/query.x", params, (data) => {
            let list = data.data.list;
            this.pageSize = data.data.size;
            this.pageCount = page;
            this.setState({
                softList: list
            });
        })
    }

    addLabel() {
        if (this.state.softlabels) {
            this.refs.modal_add_soft.show();
        }
    }

    btnSubmit() {
        let softLabelCode = this.refs.softLabelCode.value;
        let mandatoryUpgrade = this.refs.mandatoryUpgrade.value;
        let equType = this.refs.equType.value;
        if (!softLabelCode) {
            layer.msg('定制标签必须选择!', {icon: 5});
            return false;
        }
        if (!mandatoryUpgrade) {
            layer.msg('必须选择是否强制升级!', {icon: 5});
            return false;
        }
        if (!equType) {
            layer.msg('设备类型必须选择!', {icon: 5});
            return false;
        }
        postJson("/appupdate/saveTblSoftDim.x", {
            softName: this.refs.softName.value,
            softVision: this.refs.softVision.value,
            equType: equType,
            codeVision: this.refs.codeVision.value,
            mandatoryUpgrade: mandatoryUpgrade,
            softLabelCode: softLabelCode,
            fileName: this.state.fileName,
            filePath: this.state.filePath

        }, () => {
            layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
            this.updateSoftList(1, 10);
            this.refs.modal_add_soft.close();
        });
    }

    checkboxOnClick(data, label) {
        console.log("data", data, "label", label)
        postJson("/appupdate/updateState.x", {
            softCode: label.softCode,
            state: data ? '1' : '0'
        }, () => {
            this.updateSoftList(this.pageCount, 10);
        })
    }

    delete(softCode) {
        layui.layer.confirm('确定要删除该软件版本?删除之后此标签app将无法升级!', (index) => {
            let param = {};
            param.softCode = softCode;
            postJson("/appupdate/remove.x", $.param(param),
                () => {
                    this.updateSoftList(1, 10);
                    layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除成功', {icon: 6});
                });
            layui.layer.close(index);
        });

    }

    render() {
        return (
            <Frame header="软件信息列表" headerBtns={
                <HeaderBtn onClick={() => this.addLabel()}><i className="fa fa-plus"/>&nbsp;新增版本信息</HeaderBtn>
            }
            >
                <Form type="pane" verify={() => {
                    return this.verify;
                }}>
                    <Item>
                        <Label>定制标签</Label>
                        <Select name="searchSoftLabel" ref="searchSoftLabel"
                                onChange={(data) => this.searchChange(data)}>
                            <option value="">请选择定制标签</option>
                            {this.state.softlabels ? this.state.softlabels.map((softlabel) => {
                                return <option value={softlabel.softLabe}>{softlabel.softLabeName}</option>
                            }) : ''}
                        </Select>
                        <Label>设备类型</Label>
                        <Select name="searchEquType" ref="searchEquType"
                                onChange={(data) => this.searchChange(data)}>
                            <option value="">请选择设备类型</option>
                            <option value="p">平板</option>
                            <option value="d">门口机</option>
                            <option value="m">手机</option>
                        </Select>
                    </Item>
                    <Table ref="table" count={this.pageSize}
                           pageOnClick={(page, pageSize) => this.updateSoftList(page, pageSize)}>
                        <thead>
                        <tr>
                            <th>软件名称</th>
                            <th>软件版本号</th>
                            <th>内部版本号</th>
                            <th>设备类型</th>
                            <th>状态</th>
                            <th>定制标签</th>
                            <th width="60">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.softList.map((label) => {
                                return <tr>
                                    <td>{label.softName}</td>
                                    <td>{label.softVision}</td>
                                    <td>{label.codeVision}</td>
                                    <td>{label.equType === 'p' ? '平板' : label.equType === 'd' ? '门口机' : label.equType === 'm' ? '手机' : '未知'}</td>
                                    <td>{label.softState === '0' ?
                                        <Switch onClick={(data) => this.checkboxOnClick(data, label)} checked={false}
                                                lay-text="启用|禁用"/>
                                        :
                                        <Switch onClick={(data) => this.checkboxOnClick(data, label)} checked={true}
                                                lay-text="启用|禁用"/>
                                    }</td>
                                    <td>{label.softLabeName}</td>
                                    <td>
                                        <Button size="xs" btnType="danger"
                                                onClick={() => this.delete(label.softCode)}>删除</Button>
                                    </td>
                                </tr>
                            })
                        }
                        </tbody>
                    </Table>

                    <Modal title="添加软件信息" ref="modal_add_soft" area={['60%']}>
                        <Item>
                            <Label>软件名称</Label>
                            <Input type="text" name="softName" ref="softName"
                                   lay-verify="softName"
                                   placeholder="请输入软件名称"/>
                        </Item>
                        <Item>
                            <Label>软件版本号</Label>
                            <Input type="text" name="softVision" ref="softVision" lay-verify="softVision"
                                   placeholder="请输入软件版本号"/>
                        </Item>
                        <Item>
                            <Label>代码版本号</Label>
                            <Input type="text" name="codeVision" ref="codeVision" lay-verify="codeVision"
                                   placeholder="请输入代码版本号"/>
                        </Item>
                        <Item>
                            <Label>定制标签</Label>
                            <Select name="softLabelCode" ref="softLabelCode">
                                <option value="">请选择定制标签</option>
                                {this.state.softlabels ? this.state.softlabels.map((softlabel) => {
                                    return <option value={softlabel.softLabelCode}>{softlabel.softLabeName}</option>
                                }) : ''}
                            </Select>
                        </Item>
                        <Item>
                            <Label>强制升级</Label>
                            <Select name="mandatoryUpgrade" ref="mandatoryUpgrade">
                                <option value="">请选择是否强制升级</option>
                                <option value="0">强制升级</option>
                                <option value="1">不强制升级</option>
                            </Select>
                        </Item>
                        <Item>
                            <Label>设备类型</Label>
                            <Select name="equType" ref="equType">
                                <option value="">请选择设备类型</option>
                                <option value="p">平板</option>
                                <option value="d">门口机</option>
                                <option value="m">手机</option>
                            </Select>
                        </Item>
                        <Item>
                            <Label>APP上传</Label>
                            <UploadFile accept=".apk"
                                        onChange={(event) => this.upload(event)}>
                                <Input block={true} readonly="readonly" value={this.state.fileInputValue}/>
                            </UploadFile>
                        </Item>
                        <Item>
                            <Label>更新说明</Label>
                            <Input block={true} type="text" name="description" ref="description"
                                   lay-verify="description"
                                   placeholder="请输入描述"/>
                        </Item>
                        <Item>
                            <Button type="button" style={{float: 'right'}} id="savebt"
                                    onClick={() => this.btnSubmit()}>新增保存</Button>
                        </Item>
                    </Modal>

                </Form>
            </Frame>
        )
    }
}

ReactDOM.render(<SoftLabel/>, document.getElementById('root'));
